<template>
  <!-- 维护作业-公共档案维护页面 -->
  <div class="fillcontain">
    <el-form :model="searchParams" :rules="searchRules" ref="searchForm" label-width="100px" class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="Eutblcode" prop="eutblcode">
            <el-input clearable v-model="searchParams.eutblcode" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Eutblord" prop="eutblord">
            <el-input clearable v-model="searchParams.eutblord" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="text_center">
          <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
          <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="contain">
      <el-row class="bgfff pb15">
        <el-col :span="24" class="pt5">
          <el-button type="danger" plain @click="addClick">新增</el-button>
        </el-col>
      </el-row>
      <!-- 查询结果 -->
      <div class="table_container">
        <el-table
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            header-cell-class-name="table-header-class"
            style="width:100%">
          <el-table-column
              min-width="120"
              property="eutblcode"
              label="Eutblcode"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="eutblitem"
              label="Eutblitem"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="eutblord"
              label="Eutblord"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="euitmdesc"
              label="Euitmdesc"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="crtuser"
              label="Crtuser"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="dtecrt"
              label="Dtecrt"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="crttime"
              label="Crttime"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="userProfile"
              label="User Profile"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="jobName"
              label="Job Name"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="180"
              property="datime"
              label="Datime"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="srpisno"
              label="Srpisno"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="updateInd"
              label="Update Ind"
              align='center'
              :formatter="updateIndFormatter"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              fixed="right"
              label="操作"
              align='center'>
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click="modifyClick(scope.row)">修改</el-button> -->
              <span class="operationIcon" @click="modifyClick(scope.row)">
                              <el-tooltip class="item" effect="light" content="修改" placement="top">
                                <i class="el-icon-edit"></i>
                              </el-tooltip>
                          </span>
              <!--<el-button type="text" size="small" @click="deleteInfo(scope.row)">删除</el-button> -->
              <span class="operationIcon ml5" @click="deleteInfo(scope.row)">
                                <el-tooltip class="item" effect="light" content="删除" placement="top">
                                  <i class="el-icon-delete"></i>
                                </el-tooltip>
                            </span>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                  background
                  v-if='paginations.total > 0'
                  :page-sizes="paginations.pageSizes"
                  :page-size="paginations.pageSize"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  :current-page='paginations.pageIndex'
                  @current-change='handleCurrentChange'
                  @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹框 修改-->
    <el-dialog
        :title="title_O"
        :visible.sync="showDialog"
        width="50%"
        center>
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-row>
          <el-col :span="12" class="common-box">
            <el-form-item label="Eutblcode" prop="eutblcode">
              <el-input clearable v-model="form.eutblcode" maxLength="3" @blur="form.eutblcode = toCDB(form.eutblcode)"
                        :readonly="form.method == 'modify' ? true : false" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="Eutblitem" prop="eutblitem">
              <el-input clearable v-model="form.eutblitem" @blur="form.eutblitem = toCDB(form.eutblitem)" maxLength="5"
                        placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="Eutblord" prop="eutblord">
              <!-- <el-input clearable v-model="form.eutblord" maxLength="9" placeholder="请输入"></el-input> -->
              <el-input-number v-model="form.eutblord" :min="-9999999.9" :max="9999999.9" :precision="2"
                               :controls="false" class="number-input-text"
                               style="margin-right:2px!important;"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="Euitmdesc" prop="euitmdesc">
              <el-input clearable v-model="form.euitmdesc" maxLength="30" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="Srpisno" prop="srpisno">
              <el-input clearable v-model="form.srpisno" maxLength="10"
                        @blur="form.srpisno = toCDB(form.srpisno).toUpperCase()" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-form-item label="Update Ind" prop="updateInd">
              <el-select v-model="form.updateInd" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="saveInfo" class="Defaultbutton">保 存</el-button>
                <el-button @click="showDialog = false">返 回</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import constant from '@/utils/constant';
  import * as api from '@/api/setting/maintain/publicFilesMaintenance.js'
  import validRules from "@/utils/validRules";

  export default {
    data() {
      // var checkSrpisno = (rule, value, callback) => {
      //   let srpisno = value;
      //   if (srpisno != undefined && srpisno != "") {
      //     // srpisno = this.toCDB(srpisno).toUpperCase();
      //     // this.form.srpisno = srpisno;
      //     let para = {
      //       srpisno: srpisno,
      //     }
      //     api.querySrpisnosFromEufx(para).then(res => {
      //       this.$store.dispatch('loading/CHANGE_LOADING', false)
      //       if (res.resultCode == constant.SUCCESS) {
      //         if (res.data == 0) {
      //           callback(new Error("需求号码必须存在且尚未结案"));
      //         } else {
      //           callback();
      //         }
      //       }
      //     }).catch(err => {
      //       callback(new Error(res.resultMsg));
      //       this.$store.dispatch('loading/CHANGE_LOADING', false);
      //     })
      //   } else {
      //     callback();
      //   }

      // };
      var containChinese = (rule, value, callback) => {
        let CHNReg = /[\u4e00-\u9fa5]/;//汉字的正则表达式
        if (value.match(CHNReg)) {
          callback(new Error('不能有汉字'));
        } else {
          callback();
        }
      };
      var matchLength = (rule, value, callback) => {
        //检测长度
        let chinese_flag = false;	//非英文标识判定,默认false,无2位占位符
        let len = 30;
        let v = (value == undefined || value == null) ? "" : value;
        v = v.trim();

        let char;
        let templen = 0;
        for (let i = 0; i < v.length; i++) {
          char = v.charCodeAt(i);

          if (!(char > 255)) {
            templen = templen + 1;
          } else {
            templen = templen + 2;
            chinese_flag = true;
          }
        }

        if (chinese_flag) {
          if ((len - 1) <= templen) {
            callback(new Error("注意!euitmdesc长度不能超出字符" + len + "位!中文" + (len / 2 - 1) + "位!"));
          } else {
            callback();
          }
        } else {
          if (len < templen) {
            callback(new Error("注意!euitmdesc长度不能超出字符" + len + "位!"));
          } else {
            callback();
          }
        }

      };
      return {
        valueDate: '',
        title_O: '新增公共档案维护',
        showDialog: false,//默认隐藏 公共档案维护修改弹框
        // 查询条件
        rules: {
          eutblcode: [
            {required: true, message: '请输入Eutblcode', trigger: 'blur'},
            {validator: containChinese, trigger: 'blur'}
          ],
          eutblitem: [
            {required: true, message: '请输入Eutblitem', trigger: 'blur'},
            {validator: containChinese, trigger: 'blur'}
          ],
          eutblord: [
            {required: true, message: '请输入Eutblord', trigger: 'blur'},
          ],
          euitmdesc: [
            {validator: matchLength, trigger: 'blur'}
          ],
          srpisno: [
            {required: true, message: '请输入Srpisno', trigger: 'blur'},
            {validator: validRules.isEnglishOrNumber, message: 'Srpisno不能为汉字！', trigger: 'blur'},
            // {validator: checkSrpisno, trigger: 'blur'}
          ],
          updateInd: [],
        },
        searchParams: {
          eutblcode: '',
          eutblord: '',
        },
        searchRules: {
          eutblcode: [
            {validator: containChinese, message: '请正确输入Eutblcode！', trigger: 'blur'}
          ],
          eutblord: [
            {validator: validRules.isEnglishOrNumber, message: '请正确输入Eutblord！', trigger: 'blur'}
          ]
        },
        tableData: [],
        loading: false,

        form: {
          method: '',
          eutblcode: '',
          eutblitem: '',
          eutblord: '',
          euitmdesc: '',
          srpisno: '',
          updateInd: '',
          eutblcodeOld: '',
          eutblitemOld: '',
        },
        option: '',
        options: [
          {value: 'I', label: 'I--新增'},
          {value: 'U', label: 'U--更新'},
          {value: 'D', label: 'D--删除'},
        ],

        //需要给分页组件传的信息
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        },
      }
    },
    created() {
//          this.getList();
    },
    mounted() {
      // this.getList();
    },
    methods: {
      addClick() {
        this.title_O = '新增公共档案维护';
        if (this.$refs['form']) {
          this.$refs['form'].resetFields();
        }
        this.showDialog = true;
        // this.form = {
        //     method: '',
        //     eutblcode: '',
        //     eutblitem: '',
        //     eutblord: '',
        //     euitmdesc: '',
        //     srpisno: '',
        //     updateInd: '',
        //     eutblcodeOld: '',
        //     eutblitemOld: '',
        // };
        this.form.method = 'add';
      },
      modifyClick(row) {
        this.title_O = '修改公共档案维护';
        if (this.$refs['form']) {
          this.$refs['form'].resetFields();
        }
        this.showDialog = true;
        Object.assign(this.form, row);
        this.form.method = 'modify';
        this.form.eutblcodeOld = row.eutblcode;
        this.form.eutblitemOld = row.eutblitem;
        //this.$refs['form'].resetFields();
      },

      // 查询列表
      getList() {
        this.$refs['searchForm'].validate((valid) => {
          if (valid) {
            this.paginations.total = 0;
            this.tableData = [];
            let para = {
              "eutblcode": this.searchParams.eutblcode,
              "eutblord": this.searchParams.eutblord,
              "pageSize": this.paginations.pageSize,
              "pageNumber": this.paginations.pageIndex,
            }

            // if(!para.eutblcode && !para.eutblord){
            //     this.$message({
            //         message: '请至少输入一个查询条件来查询！',
            //         type: 'error'
            //     });
            //     return false
            // }
            this.$store.dispatch('loading/CHANGE_LOADING', true)

            api.queryList(para).then(res => {
              this.$store.dispatch('loading/CHANGE_LOADING', false)
              if (res.resultCode == constant.SUCCESS) {
                if (res.data && res.data.list.length) {
                  this.paginations.total = res.data.total;
                  this.tableData = res.data.list;
                } else {
                  this.$message({
                    message: '查无相关数据！',
                    type: 'error'
                  });
                }
              }

            }).catch(err => {
              this.$store.dispatch('loading/CHANGE_LOADING', false);
            })
          }
        });
      },
      saveInfo() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            api.editData(this.form).then(res => {
              this.$store.dispatch('loading/CHANGE_LOADING', false)
              if (res.resultCode == constant.SUCCESS) {
                this.resetSearch();
                this.searchParams.eutblcode = this.form.eutblcode;
                this.$message.success(res.resultMsg);
                this.showDialog = false;
                this.subGetList();
              }

            }).catch(err => {
              this.$store.dispatch('loading/CHANGE_LOADING', false);
            })
          }
        });
      },
      deleteInfo(row) {
        this.$confirm('确定是否删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let para = {
            eutblcode: row.eutblcode,
            eutblitem: row.eutblitem,
          }
          if (para.eutblcode == null || para.eutblcode == "" || para.eutblitem == null || para.eutblitem == "") {
            this.$message.error("请选择一条数据。");
            return;
          }
          api.deleteData(para).then(res => {
            this.$store.dispatch('loading/CHANGE_LOADING', false)
            if (res.resultCode == constant.SUCCESS) {
              this.$message.success(res.resultMsg);
              this.subGetList();
            } else {
              this.$message.error(res.resultMsg);
            }

          }).catch(err => {
            this.$store.dispatch('loading/CHANGE_LOADING', false);
          })
        }).catch(() => {

        });
      },
      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      // 根据条件查询列表
      subGetList() {
        this.paginations.pageIndex = 1;
        this.getList();
      },
      // 清除查询条件
      resetSearch() {
        this.searchParams.eutblcode = '';
        this.searchParams.eutblord = '';
      },
      //用途：全角转换为半角
      //传入全角字符串，返回半角字符串
      toCDB(str) {
        let tmp = "";
        for (let i = 0; i < str.length; i++) {
          if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
            tmp += String.fromCharCode(str.charCodeAt(i) - 65248);
          } else {
            tmp += String.fromCharCode(str.charCodeAt(i));
          }
        }
        return tmp
      },
      updateIndFormatter(row) {
        for (let i = 0, len = this.options.length; i < len; i++) {
          if (this.options[i].value == row.updateInd) {
            return this.options[i].label;
          }
        }
      }

    },
    computed: {
      ...mapGetters(['tags']),
      reload() {
        return this.$store.state.loading.reload;
      }
    },
    activated() {
      if (this.reload) {
        this.$store.dispatch('loading/CHNAGE_RELOAD', false)
        Object.assign(this.$data, this.$options.data());
      }
    }
  }
</script>

<style lang="less" scoped>
  // 通过/deep/可以修改组件内部样式
  .number-input-text /deep/ .el-input__inner {
    text-align: left;
  }

  .fillcontain {
    padding-bottom: 0;
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;
  }

  .search_container {
    padding: 20px 20px 0 20px;
    //    border-top: 1px solid #e1e1e1;
  }

  .common-box {
    padding-bottom: 15px;
  }

  .common-lab {
    line-height: normal !important;
    text-align: right;

    .labelName {
      text-align: right;
    }
  }
</style>



